<template>
  <div class="goodsItem dd-row dd-h-2side dd-v-center">
    <!--左边和 右边 个数  -->
    <div class="leftAndNum dd-row dd-h-2side dd-v-center">
      <!--左边和 右边 菜名  -->
      <div class="nameAndNum dd-row dd-h-2side dd-v-center">
        <div class=" dd-row dd-v-center">
          <!--左边 菜的图片  -->
          <div class='img'>
            <img :src="item2.pic" alt="" />
          </div>
          <!--菜的名字  -->
          <div class='goodsName'>{{item2.name}}</div>

        </div>

        <!--菜的个数  -->
        <div class="num">X {{item2.num}}</div>
      </div>
      <!--菜的价钱  -->
      <div class="price">￥ {{item2.price}}</div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["item2"]
};
</script>
<style scoped>
.goodsItem {
  margin: 2pt 0;
  font-size: 10pt;
  width: 100%;
  box-sizing: border-box;
}
.goodsItem .leftAndNum {
  /* width: 200pt; */

  background-color: #f1f1f1;
  width: 100%;
}

.goodsItem .img {
  width: 36pt;
  height: 36pt;
}
.goodsItem .img > img {
  width: 36pt;
  height: 36pt;
  border-radius: 4pt;
  box-shadow: 0 0 5pt #ccc;
}
.goodsItem .goodsName {
  margin-left: 4pt;
  font-size: 12pt;
  font-weight: bold;
}

.goodsItem .nameAndNum {
  flex: 1;
}
.goodsItem .num {
  margin-left: 45pt;
}
.goodsItem .price {
  width: 50pt;
  text-align: right;
}
</style>
